<template>
	<view class="terminal-state">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<view class="flex terminal-state__header">
			<u-search placeholder="请输入开户银行名称" v-model="bankName" shape="square" bg-color="#f6f6f6" :show-action="false"
				@search="search" class="flex-1"></u-search>

		</view>
		<scroll-view class="home__grid-group mt-20" scroll-y @scrolltolower="onScrolltolower">
			<view>
				<view class="terminal-state__item " v-for="(item,index) in list" :key="index">

					<u-cell-group>
						<u-cell-item :title="item.name" :arrow="false" @click="getItem(item)">
							<u-image slot="icon" :src="thumb" width="40" height="40" class="card__icon mr-10"></u-image>
						</u-cell-item>

					</u-cell-group>

				</view>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				src: "/static/image/home/icon_scan.png",
				thumb: "/static/image/home/icon_bank_logo_default.png",
				pageNo: 1,
				pageSize: "20",
				requstBody: {
					"name": "", //
					"bankCode": "",
					"provinceCode": "",
					"cityCode": "",
				},
				bankName: "",
				scrollTop: 0,
				status: "loadmore",
				list: [],
			}
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		onLoad(options) {
			console.log("request=" + JSON.stringify(options))
			this.requstBody.provinceCode = options.province;
			this.requstBody.cityCode = options.city;
			this.requstBody.bankCode = options.bankCode;

			this.getBankList();
		},

		methods: {
			search(e) {
				console.log("e" + e)
				this.requstBody.name = e;
				this.pageNo = 1;
				this.list = [];
				this.getBankList();
			},
			getItem(item) {
				console.log("index," + item)
				const eventChannel = this.getOpenerEventChannel();
				// 通过监听上个页面的uni.navigateTo的events中定义的事件传递参数
				eventChannel.emit('acceptDataFromOpenedPage', {
					data: item
				});
				// 关闭当前页返回上一页并触发acceptDataFromOpenedPage事件
				uni.navigateBack({
					delta: 1
				});


			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.getBankList();
			},
			getBankList() {
				let categories = [];
				let _that = this;
				_that.$zx.common_api.getBankBranchList(this.pageNo, this.pageSize, this.requstBody).then((
					data) => {
					_that.list = _that.list.concat(data);
					console.log("data=" + JSON.stringify(_that.list))
					if (data.length !== 0) {
						this.status = "loadmore";
						this.pageNo += 1;
					} else {
						this.status = "nomore";
					}
				});
			},


		},
	}
</script>

<style scoped lang="scss">
	.terminal-state {
		&__header {
			padding: 20rpx;
			background-color: white;
		}
	}
</style>